<template>
  <h1>用户信息：</h1>
  <el-form :model="form" label-width="auto" style="max-width: 600px" class="user-info">
    <el-form-item label="用户ID：">
      <input type="text" v-model="form.id" readonly />
    </el-form-item>
    <el-form-item label="用户名称：">
      <input v-model="form.username" readonly />
    </el-form-item>
    <el-form-item label="用户昵称：">
      <input v-model="form.nickname" readonly />
    </el-form-item>
    <el-form-item label="邮箱：">
      <input v-model="form.email" readonly />
    </el-form-item>
    <el-form-item label="电话号：">
      <input v-model="form.mobile" readonly />
    </el-form-item>
    <el-form-item label="创建时间：">
      <input readonly :value="formatDate(form.createTime, 'YYYY-MM-DD HH:mm:ss')" />
    </el-form-item>
  </el-form>
</template>

<script setup>
import { onMounted, ref } from "vue";
import { getUserInfoService } from "../../api/userAPI";

const form = ref({
  id: "",
  username: "",
  nickname: "",
  email: "",
  mobile: "",
  createTime: "",
});

const getUserInfo = async () => {
  const res = await getUserInfoService();
  if (res.code === 200) {
    form.value = res.data;
  }
};

onMounted(() => {
  getUserInfo();
});
</script>

<style scoped>
input {
  border: none;
  pointer-events: none;
}
</style>
